<template>
  <div class="msj_spellstatedetail">
        <div style="padding: 10px 0; font-size: 24px; font-weight: 700;">
            <!-- <i class="el-icon-arrow-left" @click="goback"></i> -->
        </div>
        <!-- 订单步骤 -->
        <div v-show="list.huo!='成功'" style="padding: 10px 0;">
          <el-steps :active="active" align-center finish-status="success">
            <el-step title="买家下单" ></el-step>
            <el-step title="买家付款" ></el-step>
            <el-step title="商家发货" ></el-step>
            <el-step title="订单完成" ></el-step>
          </el-steps>
              </div>
              <!-- 订单信息 -->
              <div class="msj_spellstate_info">
                  <li class="msj_spellstate_info_l">
                      <p><span>订单编号:</span> {{ list.txt }}</p>
                      <p v-show="list.state=='成功'"><span>平台单号:</span> {{ list.txt }}</p>
                      <p><span>付款方式:</span> {{list.zhifu }}</p>
                      <p style="color: #519ECA;"><span>买家:</span> {{ list.user }}<i class="el-icon-question" style="margin-left: 5px; color: #666;"></i></p>
                      <p><span>付款方式:</span> {{ list.zhifu }}</p>
                      <p><span>收货人:</span> {{list.user }} <el-button type="text" 
                          >复制</el-button></p>
                          <el-button type="primary" size="small" @click="open" style="padding: 5px;">修改订单收货信息</el-button>   
                  </li>
      <!--  -->
            <li style="box-sizing: border-box; padding: 15px 20px;">
                <h4>
                    <span>订单状态:</span>
                    <span :class="list.huo=='已关闭'?'msj_ddstate2':'msj_ddstate'">{{ list.huo }}</span>
                    <div v-show="list.huo=='待发货'">(买家已付款,请商家尽快发货)<br/><el-button @click="fahuo" type="info" size="medium" >确认发货</el-button></div>
                    <div v-show="list.huo=='已关闭'">(关闭时间:{{ list.name }})</div>
                </h4>
                <div v-show="list.huo=='成功'" style="margin: 0 0 20px;">
                    <p style="padding: 10px 0; color: #666;" v-if="list.name=='订单完成'">订单已完成</p>
                    <el-button  type="primary" @click="oksuccess" v-else style="padding: 5px;" size="small">{{list.name=='待发货'?'确认发货':'确认订单完成'}}</el-button>
                    
                </div>
                <p v-show="list.huo=='待发货'" style="padding: 10px 0; font-size: 13px; color: #999;">友情提示:如果无法进行发货,请及时联系买家进行妥善处理;</p>
            </li>
        </div>

        <!-- 商品信息 -->
        <h3 style="font-size: 14px; padding: 15px 0;">商品信息</h3>
        <div>
            <el-table
        :data="data"
        border
        style="width: 100%">
        <el-table-column
          label="商品标题"
          width="180">
          <template slot-scope="scope">
            <div class="msj_shops_info">
              <div class="msj_shops_img">
                <img :src="scope.row.img" alt="">
              </div>
              <span>{{ scope.row.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="规格、编号、条码"
          width="180">
          <template slot-scope="scope">
            <div style="font-size: 13px; color: #999;">
                <p>规格:{{ scope.row.specs }}</p>
              <p>编号:{{ scope.row.txt }}</p>
              <p>条码:{{ scope.row.txt }}</p>
            </div>   
          </template>
        </el-table-column>
        <el-table-column
          label="单价">
          <template slot-scope="scope">
            <div style="font-size: 13px; color: #999;">
                <p>￥{{ scope.row.pice }}</p>
            </div>
        </template>
        </el-table-column>

        <el-table-column
          label="数量">
          <template slot-scope="scope">
            <div style="font-size: 13px; color: #999;">
                <p>{{ scope.row.number }}个</p>
            </div>
            </template>
        </el-table-column>

        <el-table-column
          label="原价">
          <template slot-scope="scope">
            <div style="font-size: 13px; color: #999;">
                <p>￥{{ scope.row.pice }}</p>
            </div>
            </template>
        </el-table-column>

        <el-table-column
          label="折扣后">
          <template slot-scope="scope">
            <div style="font-size: 13px; color: #999;">
                <p>￥{{ scope.row.pice / 10 }}</p>
            </div>
            </template>
        </el-table-column>

        <el-table-column
          prop="fukuanstate"
          label="状态"
          width="180">
        </el-table-column>
      </el-table>
      <div class="msj_spinfo_fukuan">
        <div>
            <p>商品小计: <span style="color: #666;">￥{{ list.pice }}</span></p>
            <p>运费: <span>￥6</span></p>
            <p>实付款: <span style="color: red;">￥{{ Number(list.pice) + 6 }}</span></p>
        </div>
      </div>
      
        </div>
    </div>
</template>
<script>
// import province from '../citys/city1.js'
import {getzwyStatusList,putzwyStatusListUpdate} from '@/utils/api'
export default{
  data(){
    return {
      list:{},
      active:0,
      data:[],

    }
  },
  methods:{
      firstCopySuccess(e) {
            this.$message.success('复制成功')
        },
    firstCopyError(e) {
        this.$message.error('复制失败')
    },
     open(){
    },
     oksuccess(){
    },
    fahuo(){
        putzwyStatusListUpdate({huo:"待收货",id:this.list.id}).then(res=>console.log(res))
    }
  },
  created() { 
    console.log(this.$route.params.id);
    getzwyStatusList().then(res=>{
      this.list=res.data.data.filter(item=>item.id==this.$route.params.id)[0]
      this.data=res.data.data.filter(item=>item.id==this.$route.params.id)
      console.log(this.list);
      if(this.list.huo=='待发货'){
        this.active = 2
      }else if(this.list.huo=='待收货'){
        this.active = 3
      }else{
        this.active = 4
      }
    })
  },
}
</script>
<style scoped>
*{
    margin: 0;
    list-style: none;
    padding: 0;
}
.msj_spellstate_info,.msj_spellstatedetail{
    width: 100%;
}
.msj_spellstate_info{
    border: 1px solid #eee;
    display: flex;
}
.msj_spellstate_info li{
    width: 50%;
}
.msj_spellstate_info li h4{
    font-size: 13px;
    margin: 0 0 20px;
}
.msj_spellstate_info li span{
    color: #999;font-size: 13px;
}
.msj_spellstate_info_l{
    box-sizing: border-box;
    padding: 15px 20px;
    border-right: 1px solid #eee;
}
.msj_spellstate_info_l p{
    font-size: 13px; padding: 5px 0;
    color: #333;
}
.msj_spellstate_info_l span{
    color: #999;
    display: inline-block;
    width: 90px;
    text-align: left;
}


.msj_spellstate_info li span.msj_ddstate2,.msj_spellstate_info li span.msj_ddstate{
    color: #ffc45f;
    font-size: 20px; margin: 0 10px;
}
.msj_spellstate_info li span.msj_ddstate2{
    color: #333;
}

.msj_shops_info{
    width: 100%;
    display: flex; font-size: 13px;
    align-items: center;
}
.msj_shops_img{
    padding: 10px;
}
.msj_shops_img img{
    width: 50px;
    height: 50px;
}
.msj_spinfo_fukuan{
    width: 100%;
    display: flex; border: 1px solid #ddd;
    justify-content: flex-end; box-sizing: border-box;
    padding: 5px 10px;
}
.msj_spinfo_fukuan p{
    font-size: 13px; 
    color: #999;
    text-align: right;
    padding: 5px 0;
}
.msj_spinfo_fukuan span{
    display: inline-block;
    width: 70px;
    text-align: left;
}
.zhezaho{
    width: 100%;
    height: 100vh;
    opacity: .5;
    position: fixed;
    top: 0;left: 0;
    background: #333;
    z-index: 999;
}

.el-form-item{
    margin-bottom: 15px;
}
</style>